<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 一、组件无法直接访问Vue实例对象中的数据 -->
    <!-- 二、每个组件都应该有自己保存数据的地方 -->
    <!-- 1.每一个组件都有一个data方法（data必须是一个函数） ，并且该方法一定要有返回值是一个对象-->
    <!-- 2.为什么data必须是函数：
           =>不是函数，语法报错
           =>主要原因在于Vue让每一个组件对象都会返回一个新的对象，如果是同一个对象，组件多次使用后会相互影响
    
    -->
    <div id="app">
        <!-- 3.使用子组件 -->
        <child-cpn></child-cpn>
        <child-cpn></child-cpn>
        <child-cpn></child-cpn>

    </div>

    <script src="./vue.js"></script>
    <!-- 1.创建子组件模板 -->
    <template id="child">
        <div>
            <h3>{{message}}</h3>
            <h4>{{num}}</h4>
        </div>

    </template>

    <script>
        let app = new Vue({
            el: "#app",
            data: {
                message: "hello world"
            },
            // 2.注册子组件
            components: {
                "child-cpn": {
                    template: "#child",
                    // 存放子组件数据
                    data(){
                        return {
                            message:"67888888",
                            num:100
                        }

                    }
                }
            }
        })

        console.log(app.$children);

    </script>
</body>

</html>